<template>
    <div class="signBox">
        <div class="tips">
            <span>连续 </span> <span>{{ days }}</span>
            <span>天登录</span>
        </div>
        <div class="tips">
            <br><br>
            <span style="font-size: 20px;color: red">+ 5积分</span>
        </div>
        <div class="tips">
            <br><br>
            <el-button @click="cliSign" type="warning" >点击签到</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                days: 0,
                userId:this.$route.query.userId
            };
        },
        created(){
          this.getUserSingInDays()
        },
        methods: {
            // 获取用户签到天数
            getUserSingInDays(){
                this.$http.get('api/crud/user/getUserSingInDays?userId='+this.userId).then(res=>{
                    this.days = res.data.data
                })
            },
            // 签到
            cliSign(){
                this.$http.post('api/crud/user/cliSign?userId='+this.userId).then(res=>{
                    if(res.data.flag){
                        alert('签到成功')
                    }else{
                        alert('每天只能签到一次')
                    }
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .signBox {
        width: 398px;
        height: 276px;
        background: #2d3949;
        border-radius: 10px;
        padding: 1.4% 2.3%;
        margin: 0 auto;
        .tips {
            margin-top: 3%;
            span {
                color: #ffffff;
                font-size: 16px;
                font-family: PingFang SC;
                letter-spacing: -0.1px;
                line-height: 22px;
                font-weight: 500;
            }
            :nth-of-type(2) {
                color: #fe9300;
                letter-spacing: -0.1px;
            }
        }
        .history {
            opacity: 0.5;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            font-weight: 400;
            cursor: pointer;
            margin: 3% 0 6% 0;
        }
        .signBtnBox {
            display: flex;
            justify-content: space-between;
            & > li {
                cursor: pointer;
                width: 42px;
                height: 52px;
                background: #28313e;
                border-radius: 4px;
                img {
                    margin: 6px 0 0 10px;
                }
                p {
                    text-align: center;
                    opacity: 0.6;
                    font-family: PingFangSC-Medium;
                    font-size: 14px;
                    color: #ffffff;
                    letter-spacing: 0;
                    font-weight: 500;
                }
            }
            .signed {
                background: #ff9400;
                color: #ffffff;
                p {
                    opacity: 1 !important;
                }
            }
        }
        .signResetTime {
            text-align: center;
            opacity: 0.5;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            font-weight: 400;
            margin: 3% 0;
        }
        .pointJump {
            display: flex;
            justify-content: space-between;
            .pointShop {
                width: 110px;
                height: 76px;
                /*background-image: url(./image/积分商城.png);*/
            }
            .textCenter {
                width: 110px;
                height: 76px;
                /*background-image: url(./image/任务中心.png);*/
            }
            .myWallet {
                width: 110px;
                height: 76px;
                /*background-image: url(./image/我的钱包.png);*/
            }
            .pointShop,
            .textCenter,
            .myWallet {
                padding: 20px 10px;
                line-height: 20px;
                font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #ffffff;
                letter-spacing: 0;
                font-weight: 500;
                cursor: pointer;
                p {
                    opacity: 0.9;
                }
            }
        }
    }
</style>
